<template>
    <div class="category">
        <div class="category-search">
            <van-search
                v-model="value"
                placeholder="商品搜索,共239款好物"
                input-align="center"
            />
        </div>
        <div class="category-content">
            <!-- 侧边栏 -->
            <div class="left">
                <div class="sidebar">
                    <van-sidebar v-model="activeKey">
                        <van-sidebar-item
                            v-for="(item, index) in categoryList"
                            :key="index"
                            :title="item.name"
                        />
                    </van-sidebar>
                </div>
            </div>
            <!-- 展示栏 -->
            <div class="right">
                <img :src="currentOne.banner_url" alt="" class="banner">
                <div class="title">
                    <div class="title-left">一</div>
                    <div class="title-center">{{currentOne.name}}分类</div>
                    <div class="title-right">一</div>
                </div>
                <van-grid :column-num="3" square :border="false">
                    <van-grid-item
                        v-for="(item, index) in currentOne.subList"
                        :key="index"
                        @click="toHomeCategory(item.id)"
                    >
                        <van-image :src="item.wap_banner_url" />
                        <span>{{item.name}}</span>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
    </div>

</template>

<script>
import { getCategoryInfo, getSubListInfo } from '@/api/category/index'
import { mapState , mapMutations , mapActions , mapGetters} from 'vuex'
export default {
    data() {
        return {
            value: '',
            activeKey: 0,
            // categoryList: [],
            // listId: '',
            // currentOne: ''
        }
    },
    methods: {
        ...mapMutations({
            setCategoryList: 'category/setCategoryList',
            setCurrentOne: 'category/setCurrentOne',
        }),
        // 跳转到商品分类
        toHomeCategory(id) {
            this.$router.push({ name: 'homeCategory', query: { id, } })
        }
    },
    computed: {
        ...mapState({
            categoryList: state => state.category.categoryList,
            currentOne: state => state.category.currentOne,
        })
    },
    watch: {
        // id改变进行异步请求
        activeKey(newval) {
            getSubListInfo({id: this.categoryList[newval].id})
            .then(res => {
                this.setCurrentOne(res)
            });
        }
    },
    created() {
        // 请求导航 如果store里面有数据就不再获取
        getCategoryInfo()
        .then( res => {
            // 设置CategoryList
            this.setCategoryList(res)
            // console.log(this.categoryList);
            // 请求分类列表数据
            getSubListInfo({id: this.categoryList[this.activeKey].id})
            .then(res => {
                this.setCurrentOne(res)
            })
        })
    }
}
</script>

<style lang="scss" scoped>
    .category{
        width: 100%;
        .category-search{
            border-bottom: 1px solid #f4f4f4;
        }
        .category-content{
            display: flex;
            .right{
                width: 100%;
                padding: 8px;
                .banner{
                    width: 100%;
                    height: 111px;
                }
                .title{
                    display: flex;
                    height: 60px;
                    align-items: center;
                    text-align: center;
                    justify-content: center;
                    .title-center{
                        font-size: .32rem;
                        color: #333;
                    }
                    .title-left, .title-right{
                        padding: 5px;
                    }
                }
            }
        }
    }
</style>
